import React, { useEffect } from 'react';
import { Route, Routes, useLocation } from 'react-router-dom';
import { Modal } from 'antd';
import Dashboard from './Dashboard';
import Home from './Home';
import Unauthorized from './Unauthorized';
import NoMatched from './NoMatched';
import CityList from './company/CityList';
import CompanyList from './company/CompanyList';
import CertificateList from './sync/CertificateList';
import TaskList from './sync/TaskList';
import CreateTask from './sync/CreateTask';
import TaskDetail from './sync/TaskDetail';
import UserManagement from './user/UserManagement'
import LoginLogList from './user/LoginLogList';
import VerificationCodeList from './user/VerificationCodeList';
import { useStore, observer } from '../store/currentUser/storeHook';

const RouterView: React.FC = () => {
  const store: any = useStore();
  const location = useLocation();
  let index: JSX.Element = <div />;
  if (store.currentUser.userData?.id) {
    if (store.currentUser.hasRole('admin')) {
      index = <Dashboard />;
    } else if (store.currentUser.hasRole('authorized')) {
      index = <Home />;
    } else {
      index = <Unauthorized />;
    }
  }
  useEffect(() => {
    Modal.destroyAll();
  }, [location.pathname]);
  return (
    <Routes>
      <Route path="/" element={index} />
      <Route path="/city_list" element={<CityList />} />
      <Route path="/company_list" element={<CompanyList />} />
      <Route path="/certificate_list" element={<CertificateList />} />
      <Route path="/task_list" element={<TaskList />} />
      <Route path="/task_list/create_task" element={<CreateTask />} />
      <Route path="/task_list/task_detail/:id" element={<TaskDetail />} />
      <Route path="/user_management" element={<UserManagement />} />
      <Route path="/login_log_list" element={<LoginLogList />} />
      <Route path="/verification_code_list" element={<VerificationCodeList />} />
      <Route path="/*" element={<NoMatched />} />
    </Routes>
  );
};

export default observer(RouterView);
